<template>
  <div>
  



      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
    <img src="../assets/img/banner.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../assets/轮播图.webp" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../assets/轮播图2.webp" alt="">
  </van-swipe-item>
</van-swipe>
        
      </div>

      <!-- <div class="navbook" >
        <div class="itembox" v-for="(item) in lists" :key="item.navId">
          <img :src="item.navIcon" alt="">
          <p>{{item.navName}}</p>
        </div>

      </div> -->

      <div class="bookbox">
        <div class="titlebox">
          <p>新书速递</p>
          <div class="abox">
            <a href="">查看全部</a>
            <a href=""><i></i></a>
          </div>
        </div>

        <div class="newbook">

          <div class="book-box">
            <div class="imgbox" v-for="item in express.slice(0,3)" :key="item.bookId" @click="book(item)">
              <div class="img">
                <img :src="item.bookCover" alt="">
              </div>
              <span>{{item.bookName}}</span>
            </div>

          </div>

          <div class="book-box">
            <div tag="div" to="/DetailView" class="imgbox" v-for="item in express.slice(3,6)" :key="item.bookId" @click="book(item)">
              <div class="img">
                <img :src="item.bookCover" alt="">
              </div>
              <span>{{item.bookName}}</span>
            </div>


          </div>

        </div>
      </div>


      <div class="bookbox">
        <div class="titlebox" >
          <p>畅销热门</p>
          <div class="abox">
            <a href="">查看全部</a>
            <a href=""><i></i></a>
          </div>
        </div>

        <div class="B-hotbox">
          <div class="hotbox"  v-for="item in express.slice(0,4)" :key="item.bookId"  @click="book(item)">
            <div class="img">
              <img :src="item.bookCover" alt="">
            </div>
            <div class="textbox">
              <span>{{item.bookName}}</span>
            </div>

            <div class="textbox">
              <span>{{item.bookAuthor}}</span>
            </div>

          </div>

     
        </div>

      </div>


      <div class="hot-banner">
        <img src="../assets/img/卡戴基.png" alt="">
      </div>

      <div class="bookbox">
        <div class="titlebox">
          <p>小说精选</p>
          <div class="abox">
            <a href="">查看全部</a>
            <a href=""><i></i></a>
          </div>
        </div>

        <div class="newbook">

          <div class="book-box">
            <div class="imgbox" v-for="item in express.slice(0,3)" :key="item.bookId"  @click="book(item)">
              <div class="img">
                <img  :src="item.bookCover" alt="">
              </div>
              <span>{{item.bookName}}</span>
            </div>

          </div>

          <div class="book-box">
            <div class="imgbox" v-for="item in express.slice(3,6)" :key="item.bookId"  @click="book(item)">
              <div class="img">
                <img  :src="item.bookCover" alt="">
              </div>
              <span>{{item.bookName}}</span>
            </div>

          </div>

         
        </div>
      </div>

      <div class="bookbox">
        <div class="titlebox">
          <p>优选套餐</p>
          <div class="abox">
            <a href="">更多套餐</a>
            <a href=""><i></i></a>
          </div>
        </div>

        <div class="B-hotbox">
          <div class="hotbox"  v-for="item in express.slice(0,4)" :key="item.bookId"  @click="book(item)">
            <div class="img">
              <img :src="item.bookCover" alt="">
            </div>
            <div class="textbox">
              <span>{{item.bookName}}</span>
            </div>

            <div class="textbox">
              <span>{{item.bookAuthor}}</span>
            </div>

          </div>

          <!-- <div class="hotbox">
            <div class="img">
              <img src="../assets/img/book5.png" alt="">
            </div>
            <div class="textbox">
              <span>每晚一个恐怖故事</span>
            </div>

            <div class="textbox">
              <span>悬疑志编辑部</span>
            </div>

          </div> -->

        </div>

      </div>
    </div>

</template>

<script>
import { getbookData } from "../api/home.js";
import { getExpressData } from "../api/home.js";


export default {
  data(){
    return{
      lists:[],
      express:[],
      list:[]
    }
  },


  methods:{

    //获取书库头像数据方法
    getbookDataFun(){
      getbookData().then((data)=>{
        // console.log(data.data.records)
        this.lists = data.data.records
        // console.log("lists:",this.lists)
      })
    },

     //获取书本数据方法
    getExpressDataFun(){
      getExpressData().then((data)=>{
        console.log(data)
        this.express = data.records
        console.log("express", this.express)
      })
    },


    book(item){
   this.express = item
      localStorage.setItem("forms",JSON.stringify(this.express))
      this.$router.push("/DetailView")
    },


  },

 
  created(){
    // 调用方法
    this.getbookDataFun();
    this.getExpressDataFun()
  }

}
</script>

<style lang="scss" scoped>
@import '../assets/css/base.css';



.headerbox {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  background-color: #fff;
}

.header {
  padding-top: 12px;

  .searchbox {
    display: flex;

    .search {
      flex: 1;
      height: 45px;
      line-height: 45px;
      background: url(../assets/img/nav_ic_search.png) no-repeat;
      background-size: 45px;
      font-size: 16px;
      color: #a8b2c2;
      padding-left: 36px;
      background-color: #f6f6f6;
      border-radius: 50px;
      margin-left: 12px;
    }

    .shopcar {
      width: 30px;
      height: 30px;
      padding-right: 16px;
      padding-left: 16px;
      padding-top: 8px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .navbox {
    height: 62px;
    line-height: 62px;
    font-size: 16px;

    ul {
      display: flex;
      justify-content: space-evenly;

      li {
        a {
          color: #acb5c6;

          &.con {
            border-bottom: 5px solid #f5c265;
            padding-bottom: 8px;
            font-size: 20px;
            color: #000;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.banner {
  padding: 12px;
  height: 150px;
  margin-top: 58px;

  img {
    width: 350px;
    height: 147px;
    border-radius: 6px;
  }
}

.navbook {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;

  .itembox {
    display: flex;
    align-items: center;
    flex-direction: column;

    img {
      width: 40px;
      height: 40px;
    }

    p {
      font-size: 16px;
      padding-top: 6px;
      color: #788190;
    }
  }
}

.bookbox {
  padding: 3px 12px;
  padding-bottom: 0px;

  .titlebox {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    p {
      font-size: 20px;
      color: #000;
      font-weight: bold;
    }

    .abox {
      display: flex;
      align-items: center;

      a {
        padding-right: 2px;
        font-size: 14px;
        color: #cdd2dc;

        i {
          width: 12px;
          height: 12px;
          background: url(../assets/img/icon_common_more.png) center center no-repeat;
          background-size: 100%;
          display: inline-block;
          margin-top: 4px;
        }
      }
    }
  }

  &:nth-child(5) {
    padding-top: 0px;
  }

  .B-hotbox {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;

    .hotbox {
      width: 88px;
      text-overflow: ellipsis;

      .img {
        width: auto;
        height: 114px;

        img {
          width: 78px;
          height: 114px;
        }
      }

      .textbox {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        width: 100%;
        color: #000;

        &:nth-child(3) {
          font-size: 13px;
          color: #9ba6ba;
        }
      }
    }
  }
}

.newbook {
  padding: 0 18px;
  margin-top: 22px;

  .book-box {
    display: flex;
    justify-content: space-between;
  }

  .imgbox {
    height: 170px;
    width: 88px;

    .img {
      width: auto;
      height: 120px;
      padding-right: 4px;

      img {
        width: 78px;
        height: 114px;
      }
    }

    span {
      padding-top: 4px;
      font-size: 13px;
    }
  }
}

/* 畅销热门 */
/* .bookbox .B-hotbox .hotbox .textbox p{
    font-size: 13px;
}
.bookbox .B-hotbox .hotbox .textbox span{
} */
/* .bookbox .B-hotbox .hotbox  span{
}
.bookbox .B-hotbox .hotbox  p{
    overflow: hidden;
    text-overflow: ellipsis;
} */
.hot-banner {
  margin-top: 40px;
  margin-bottom: 46px;
  margin-left: 18px;
  margin-right: 18px;

  img {
    width: 100%;
    height: 240px;
  }
}
</style>